<template>
  <view>

    <!-- 
		       "indicatorDots": "true",
		       "indicatorActiveColor": "#f40",
		       "autoplay": true,
		       "circular": true,
		       "duration": 1000,
		       "interval": "1500"
		 -->
    <!-- 轮播图 -->

    <blockquote v-if="settingList.length>0 && settingList[3].config.show && settingList[3].config.items.length">
      <!-- 根据setting对象中的配置渲染  需保证 轮播图开关打开状态 并有轮播图数组-->
      <swiper class="swiper" :indicator-active-color="settingList[3].config.indicatorActiveColor"
        :indicator-dots="settingList[3].config.indicatorDots" :autoplay="settingList[3].config.autoplay"
        :interval="settingList[3].config.interval" :duration="settingList[3].config.duration"
        :circular="settingList[3].config.circular">
        <swiper-item v-for="(item,index) in settingList[3].config.items" :key="index">
          <!-- 页面还不够丰富 等制作了会员促销页 热销列表页 打折页 再回头搞轮播 -->
          <view class="swiper-item" @click="handleSwiperItem" :data-path="item.path">
            <image class="swiper-item-img" :src="item.src" mode="scaleToFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </blockquote>
    <blockquote v-else>
      		<uni-section title="基础卡片" type="line">
      			<uni-card :is-shadow="true">
      				<text class="uni-body">由于没有获取到轮播数据 所以你才会看到我。</text>
      			</uni-card>
      		</uni-section>
    </blockquote>
    <!-- topBar -->
    <blockquote>
      <view class="top-bar">
        <view class="logo">
          <image src="../../static/images/logo.png" mode=""></image>
        </view>
        <view class="search">
          <uni-search-bar :focus="false" v-model="searchValue" @confirm="search_search" @blur="search_blur"
            @focus="search_focus" @input="search_input" @cancel="search_cancel" @clear="search_clear">
          </uni-search-bar>
        </view>
        <view class="menu">
          <uni-icons type="bars" size="30" @click="handleMenuPanel"></uni-icons>
        </view>
      </view>
    </blockquote>

    <!-- 菜单弹窗 右侧弹出 -->
    <view class="custom-popup" @click="handleMenuPanel" v-show="isShowByMenuPanel" data-tag="parent">
      <view v-for="(item,index) in settingList[2].items" or class="item" data-tag="child" :key="index">
        {{item.text}}
      </view>
    </view>
    <!-- 选项卡 商品分类横栏 -->
    <blockquote>
      <!-- 它只负责渲染出分类列表 给出用户点击的哪一个的反馈 -->
      <goods-list-tabs :tabsList="goodTypesList" @getGoodsTypeNameByTabsHook="getGoodsTypeNameByTabsHook">
      </goods-list-tabs>
    </blockquote>
    <blockquote>
      <!-- 商品列表> 商品卡片 -->
      <goods-list :_activeGoodsListByTab="activeGoodsListByTab"></goods-list>
    </blockquote>
    <blockquote>
      <load-more status="noMore"></load-more>
    </blockquote>
  </view>
</template>

<script>
  // let GOODS = uniCloud.importObject('ByGoods')
  // let SETTING = uniCloud.importObject('BySetting')
  export default {
    async onLoad() {},
    data() {
      return {
        goodsList: [], //判断时以length为主
        settingList: [],
        goodTypesList: [],
        searchValue: null,
        isShowByMenuPanel: false,
        activeGoodsListByTab: [],
      }
    },

    async mounted() {
      // //商品数据请求
      // this.goodsList = await GOODS.getGoodsList(20, 2)
      // // //配置数据请求

      // this.settingList = await SETTING.getSettingList()
      // // //商品分类列表请求
      // this.goodTypesList = await GOODS.getGoodTypesList()


    },
    watch: {},
    methods: {

      getGoodsTypeNameByTabsHook(payload) {
        //监听到分类修改就同步到home组件的activeTab上
        console.log('分类有修改', payload);

        // 维护一个当前分类的数据，暂时不考虑分页的情况

        //若tabs返回的数据是全部 那就整个给到活跃的已经分类的商品列表
        if (payload == '全部') return this.activeGoodsListByTab = this.goodsList
        this.activeGoodsListByTab = this.goodsList.filter(item => item.goods_type == payload)
      },
      handleSwiperItem(e) {
        // 点击轮播项会执行的函数
        uni.navigateTo({
          url: e.currentTarget.dataset.path + '?a=1',
        })
        console.log(e.currentTarget.dataset.path);

      },
      handleMenuPanel(e) {
        //控制一个平时隐藏的列表 点击了menu按钮后会展开 和关闭
        // popup太不友好 取消使用 改为自己做一个弹出层
        //菜单弹出框的回调函数 展开和关闭都合在了一起 因为你选择完菜单页还是要关闭的
        let type = e ? e.target.dataset.tag : undefined //parent child undefined
        if (type) {
          console.log(type);
        } else {
          console.log(type, "进入否则逻辑");
        }
        this.isShowByMenuPanel = !this.isShowByMenuPanel
      },
      //搜索框的回调函数
      search_search(res) {
        uni.showToast({
          title: '搜索：' + res.value,
          icon: 'none'
        })
      },
      search_input(res) {
        console.log('----input:', res)
      },
      search_clear(res) {
        uni.showToast({
          title: 'clear事件，清除值为：' + res.value,
          icon: 'none'
        })
      },
      search_blur(res) {
        uni.showToast({
          title: 'blur事件，输入值为：' + res.value,
          icon: 'none'
        })
      },
      search_focus(e) {
        uni.showToast({
          title: 'focus事件，输出值为：' + e.value,
          icon: 'none'
        })
      },
      search_cancel(res) {
        uni.showToast({
          title: '点击取消，输入值为：' + res.value,
          icon: 'none'
        })
      },
    }
  }
</script>

<style>
  .swiper-item-img {
    width: 100%;
    height: 100%;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-item {
    display: block;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
  }

  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }

  /* 	
	.swiper-item img {
		width: 100%;
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
 */
  .top-bar {
    display: flex;
    margin: 10rpx;
  }

  .top-bar .logo,
  .top-bar .menu {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top-bar .logo image {
    width: 60rpx;
    height: 60rpx;
  }

  .top-bar .search {
    flex: 8;
  }

  .custom-popup {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 100vw;
    height: 100vh;
    background-color: rgba(10, 10, 10, .5);
    z-index: 1;
  }

  .custom-popup .item {
    text-align: center;
    width: 300rpx;
    height: 50rpx;
    padding: 20rpx;
    margin: 20rpx 0;
    color: black;
    font-weight: 900;
    font-size: 30rpx;
    letter-spacing: .2rem;
    background-color: greenyellow;
    border-radius: 20rpx 0 0 20rpx;
    z-index: 2;
  }

  .custom-popup .item:hover,
  .custom-popup .item:active {
    text-align: center;
    width: 300rpx;
    height: 50rpx;
    padding: 20rpx;
    margin: 20rpx 0;
    color: black;
    font-weight: 900;
    font-size: 30rpx;
    letter-spacing: .2rem;
    background-color: blue;
    border-radius: 20rpx 0 0 20rpx;
    z-index: 2;
  }

  /* 配色 */
  .dark_deep {
    background-color: #99a9bf;
  }

  .dark {
    background-color: #d3dce6;
  }

  .light {
    background-color: #e5e9f2;
  }
</style>
